<template>
  <div>
    <UserInfoComp>
      <div>游戏管理</div>
    </UserInfoComp>
  </div>

  <!-- 查询游戏的部分 -->
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-input v-model="queryInfo.gname" placeholder="游戏名称模糊查询"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="queryInfo.publisher" placeholder="所属发行商"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button-group>
          <el-button type="primary" @click="requery">查询</el-button>
          <el-button type="danger" @click="reset">重置</el-button>
          <el-button type="success" @click="resetAdd">添加</el-button>
        </el-button-group>
      </el-form-item>
    </el-form>
  </div>

  <!-- 数据呈现的部分 -->
  <div>
    <el-table :data="list" stripe>
      <el-table-column width="180" prop="gname" label="游戏名称"></el-table-column>
      <el-table-column prop="intro" label="游戏简介"></el-table-column>
      <el-table-column label="游戏发布时间" prop="created">
        <template #default="scope">
          {{ tools.formatDate(scope.row.created, 'yyyy-MM-dd') }}
        </template>
      </el-table-column>
      <el-table-column
        width="180"
        prop="tbGamePublisher.publisher"
        label="游戏发行商"
      ></el-table-column>
      <el-table-column width="160" label="操作">
        <template #default="scope">
          <el-button @click="showModify(scope.row)" type="primary" size="small">修改</el-button>
          <el-button @click="del(scope.row)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!-- 分页的部分 -->
  <div>
    <el-pagination
      v-model:current-page="page.pageNumber"
      v-model:page-size="page.pageSize"
      :total="page.total"
      :page-sizes="[2, 5, 10, 20]"
      @current-change="query"
      @size-change="query"
      layout="total,prev,pager,next,sizes"
    >
    </el-pagination>
  </div>

  <!-- 游戏选择的部分 -->
  <el-dialog v-model="tvisible" title="选择游戏类型">
    <GamepublisherComp @type-selected="selectedType" mode="selector"></GamepublisherComp>
  </el-dialog>

  <!-- 添加的部分 -->
  <el-dialog v-model="avisible" title="添加游戏" :close-on-click-modal="false" @click="requery">
    <div>
      <el-form>
        <el-form-item>
          <!-- {{ addInfo }} -->
          <el-button @click="tvisible = true">{{ addButtonText }}</el-button>
        </el-form-item>

        <el-form-item>
          <el-input v-model="addInfo.gname" placeholder="游戏名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="addInfo.intro" placeholder="游戏简介"></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="addInfo.created"
            value-format="YYYY-MM-DD"
            placeholder="游戏发行时间"
          ></el-date-picker>
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <el-button @click="avisible = false">取消</el-button>
      <el-button type="primary" @click="add">确定</el-button>
    </template>
  </el-dialog>

  <!-- 修改的部分 -->
  <el-dialog v-model="mvisible" title="修改游戏" :close-on-click-modal="false" @closed="requery">
    <div>
      <el-form-item>
        {{ modifyInfo }}
        <el-button @click="tvisible = true">{{ modifyButtonText }}</el-button>
      </el-form-item>

      <el-form-item>
        <el-input v-model="modifyInfo.gname" placeholder="游戏名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="modifyInfo.intro" placeholder="游戏简介"></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="modifyInfo.created"
          value-format="YYYY-MM-DD"
          placeholder="游戏发行时间"
        ></el-date-picker>
      </el-form-item>
    </div>

    <template #footer>
      <el-button @click="mvisible = false">取消</el-button>
      <el-button type="primary" @click="modify">保存</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import UserInfoComp from '@/components/UserInfoComp.vue'
import { ref, onMounted } from 'vue'
import { api } from '@/js/ajax'
import { tools } from '@/js/tools'
import { ElMessage, ElMessageBox } from 'element-plus'
import GamepublisherComp from '@/components/GamepublisherComp.vue'

onMounted(() => {
  query()
})

// #region 删除的部分
const del = (info) => {
  ElMessageBox.confirm(`是否要删除:${info.gname}?`, '删除确认')
    .then(() => {
      api.delete(`/crud/game/${info.gid}`, {}, (data) => {
        if (data.success) {
          ElMessage.success(data.message)
        } else {
          ElMessage.error(data.message)
        }
        requery()
      })
    })
    .catch(() => {})
}
// #endregion

//#region 查询的区域
const page = ref({ pageSize: 10, pageNumber: 1 })
const queryInfo = ref({
  gname: '',
  publisher: '',
})

const list = ref([])

const requery = () => {
  page.value.pageNumber = 1
  query()
}
const reset = () => {
  queryInfo.value = {
    gname: '',
    publisher: '',
  }
  requery()
}
const query = () => {
  api.get(`/crud/game/${page.value.pageSize}/${page.value.pageNumber}`, queryInfo.value, (data) => {
    if (data.success) {
      page.value = data.data.pageBean
      list.value = data.data.data
      return
    }
    ElMessageBox.alert(data.message, '错误')
  })
}

//#endregion

//#region 修改的部分
const modifyButtonText = ref('请选择分类...')

const mvisible = ref(false)

const modifyInfo = ref({
  gpid: -1,
  publisher: '',
  intro: '',
  created: '',
})

const modify = () => {
  api.put('/crud/game', modifyInfo.value, (data) => {
    if (data.success) {
      ElMessage.success('修改成功')
      mvisible.value = false
      return
    }
    ElMessage.alert(data.message, '错误')
  })
}

const showModify = (info) => {
  typemode.value = 'modify'
  modifyInfo.value = tools.mergeJson(info)
  modifyButtonText.value = info.tbGamePublisher.publisher
  modifyInfo.value.created = tools.formatDate(info.created)
  mvisible.value = true
}

//#endregion

//#region 添加的部分

const addButtonText = ref('请选择分类...')

const avisible = ref(false)

const addInfo = ref({
  publisher: '',
  gname: '',
  intro: '',
  created: '',
})

const resetAdd = () => {
  typemode.value = 'add'
  addInfo.value = {
    gname: '',
    publisher: '',
    intro: '',
    created: '',
  }
  addButtonText.value = '请选择分类...'
  avisible.value = true
}

const add = () => {
  api.post('/crud/game', addInfo.value, (data) => {
    if (data.success) {
      ElMessage.success('添加成功')
      avisible.value = false
      return
    }
    ElMessage.alert(data.message, '错误')
  })
}
//#endregion

//#region 游戏类型选择
const type = ref({})
const tvisible = ref(false)
const typemode = ref('add')

const selectedType = (typeinfo) => {
  type.value = typeinfo

  if (typemode.value == 'add') {
    addInfo.value.publisher = typeinfo.gpid
    addButtonText.value = typeinfo.publisher
  } else if (typemode.value == 'modify') {
    modifyInfo.value.publisher = typeinfo.gpid
    modifyButtonText.value = typeinfo.publisher
  }
  tvisible.value = false
}
//#endregion
</script>

<style scoped></style>
